<template>
  <div class="task">
    <div class="list">
      <h2>新手任务</h2>
      <div class="table">
        <div class="title">
          <p class="index">序号</p>
          <p class="text">任务内容</p>
          <p class="date">操作</p>
        </div>
        <div v-for="(item, index) in taskList" :key="item.id" class="content">
          <p class="index">{{ index + 1 | addZeroPrefix }}</p>
          <p class="text">{{ item.title }}</p>
          <p class="date" :class="{'complete' : item.isCompleted}" @click="linkTo(item, index)">{{ item.isCompleted ? '已完成' : item.linkName }}</p>
        </div>
      </div>
    </div>
    <div class="pagination">
      <el-pagination
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="prev, pager, next, sizes, jumper"
        :total="noticeCount"
        :hide-on-single-page="true"
        :page-sizes="[10, 20, 30]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  name: 'Task',
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      noticeCount: 6
    };
  },
  computed: {
    ...mapGetters(['taskList', 'shopInfo'])
  },
  methods: {
    linkTo(item, i) {
      if (i === 0 && !item.isCompleted) {
        this.$router.push({ name: item.path });
        return;
      }
      if (i > 0 && !item.isCompleted) {
        if (this.taskList[i - 1].isCompleted || (i === 3 && this.taskList[1].isCompleted)) {
          this.$router.push({ name: item.path });
        } else {
          this.$message({
            message: this.taskList[i - 1].title,
            type: 'warning'
          });
          return;
        }
      }
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    }
  }
};
</script>
<style lang="scss" scoped>
	.task{
    width: 100%;
    background-color: #fff;
    color: $textColorDark;
    padding-bottom: 20px;
    h2,p{
      margin: 0;
      padding: 0;
    }
    h2{
      font-size: $fontSizeLg;
      padding: 20px 30px;
      border-bottom: 1px solid $borderColor;
    }
    .content{
      height: 100px;
      border-bottom: 1px solid $borderColor;
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
    .table{
      padding: 20px;
      box-sizing: border-box;
      font-size: $fontSizeBase;
    }
    .title{
      height: 50px;
      background-color: $appBg;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      font-weight: bolder;
    }
    .index{
      flex: 0 0 60px;
      width: 60px;
      text-align: center;
    }
    .text{
      flex: calc(100% - 300px);
      width: calc(100% - 300px);
      margin-right: 60px;
      line-height: calc(22/14);
      padding-left: 30px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow:ellipsis;
    }
    .date{
      flex: 0 0 180px;
      width: 180px;
    }
    .content{
      .date{
        color: $mainColor;
        cursor: pointer;
        &.complete{
          color: $textColorBase;
          cursor: default;
        }
      }
    }
    .pagination{
      text-align: center;
    }
  }
</style>
